﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CrystalQuartz Panel</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <link href='?path=Styles.bootstrap.css' rel='stylesheet' type='text/css' />
	<link href='?path=Styles.main.css' rel='stylesheet' type='text/css' />
	<link href='?path=Fonts.flaticon.css' rel='stylesheet' type='text/css' />

    <script type='text/javascript'>
		var timeout	= 500; var closetimer	= 0; var ddmenuitem	= 0;

		function mopen(id)
		{	
			mcancelclosetime();
			if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
			ddmenuitem = document.getElementById(id);
			ddmenuitem.style.visibility = 'visible';
		}
			
		function mclose()
		{
			if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
		}

		function mclosetime()
		{
			closetimer = window.setTimeout(mclose, timeout);
		}

		function mcancelclosetime()
		{
			if(closetimer)
			{
				window.clearTimeout(closetimer);
				closetimer = null;
			}
		}

		document.onclick = mclose; 
	</script>
</head>
<body>
	<div id="application"></div>


	<script type="text/view" id="ApplicationView">
		<header id="mainHeader" class="cq-main-header">
    <div class="cq-main-header-wrapper">
        <div class="container">
            <div class="row">
                <div class="cq-header-item cq-scheduler col-xs-9 col-md-5">
                    <div id="schedulerStatus" class="cq-scheduler-status"></div>
                    <h1 id="schedulerName" class="cq-scheduler-name"></h1>
                </div>    
            
                <div id="commandIndicator" class="col-xs-3 col-md-2 cq-header-item"></div>
                
                <div class="col-xs-3 col-md-5 cq-header-item visible-md-block visible-lg-block">
                    <a class="cq-leave-link" href='/'>return to the main site</a>        
                </div>
            </div>
        </div>
    </div>
</header>

<section id="error"></section>

<div class="cq-main-content">
    <section id="schedulerPropertiesContainer" class="cq-scheduler-properties"></section>

    <section class="container">
        <section id='jobsContainer'></section>
    </section>    
</div>

<div id="dialogsOverlay" class="cq-app-overlay" style="display: none;"></div>
<div id="triggerDialog" class="cq-app-dialog" style="display: none;"></div>

<footer id="mainFooter" class="cq-main-footer">
    <div class="cq-footer-wrapper">
        <div class="container">
            <div class="pull-left">
                <div class="cq-version-container">CrystalQuartz Panel <span id="selfVersion" class="cq-version"></span> </div>
                <div class="cq-version-container visible-lg-block">Quartz.NET <span id="quartzVersion" class="cq-version"></span> </div>
                <div class="cq-version-container visible-lg-block">.NET <span id="dotNetVersion" class="cq-version"></span></div>
            </div>
            
            <div class="pull-right">
                <span id="autoUpdateMessage" class=""></span>
            </div>
        </div>    
    </div>
</footer> 
	</script>
	<script type="text/view" id="ErrorView">
		<div class="cq-error-dialog" style="display: none;">
    <div class="container">
        <div class="cq-error-dialog-body">
            <div id="errorMessage" class="cq-error-message"></div>

            <section id="errorDetails" class="cq-error-details">
                <table class="cq-info-table">
                    <thead>
                        <tr>
                            <th>Key</th>
                            <th>Value</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </section>
            
            <section class="cq-error-dialog-toolbar clearfix">
                <a href="#" class="close cq-button pull-left">Close</a>
            </section>    
        </div>
    </div>
</div> 
	</script>
	<script type="text/view" id="JobDetailsView">
		<section class="cq-job-details">
    <div class="row">
        <div class="col-md-6">
            <section class="cq-job-details-panel">
                <table class="properties">
                    <thead>
                        <tr>
                            <th class="cq-job-details-panel-title" colspan="2">Job properties</th>
                        </tr>
                        <tr>
                            <th>Property</th>
                            <th>Value</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>    
            </section>
        </div>

        <div class="col-md-6">
            <section class="cq-job-details-panel">
                <table class="dataMap">
                    <thead>
                        <tr>
                            <th class="cq-job-details-panel-title" colspan="3">Job data map</th>
                        </tr>
                        <tr>
                            <th>Key</th>
                            <th>Value</th>
                            <th>Type</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </section>
        </div>
    </div>
    
</section> 
	</script>
	<script type="text/view" id="JobGroupView">
		<article class="cq-job-group">
    <header class="cq-job-group-header">
        <span class="status"></span>
        
        <section class="actions dropdown pull-right">
            <a href="#" class="cq-actions-toggle dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li class="cq-with-icon"><a href="#" class="pause" title=""><span class="flaticon-pause"></span>Pause all jobs</a></li>
                <li class="cq-with-icon"><a href="#" class="resume" title=""><span class="flaticon-play"></span>Resume all jobs</a></li>
                <li role="separator" class="divider"></li>
                <li class="cq-with-icon"><a href="#" class="delete" title=""><span class="flaticon-remove"></span>Delete all jobs</a></li>
            </ul>
        </section>

        <h2 class="cq-job-group-header-title name"></h2>
    </header>
    <section class="content"></section>
</article> 
	</script>
	<script type="text/view" id="JobView">
		<article class="cq-job">
    <header class="cq-job-header clearfix">
        <div class="status"></div>
        
        <a class="cq-job-header-title loadDetails name" href="#"></a>
        <a class="cq-job-hide-details hideDetails" href="#">hide details</a>

        <section class="actions dropdown pull-right">
            <a href="#" class="cq-actions-toggle dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li class="cq-with-icon"><a href="#" class="pause" title=""><span class="flaticon-pause"></span>Pause all triggers</a></li>
                <li class="cq-with-icon"><a href="#" class="resume" title=""><span class="flaticon-play"></span>Resume all triggers</a></li>

                <li role="separator" class="divider"></li>
                <li class="cq-with-icon"><a href="#" class="delete" title=""><span class="flaticon-remove"></span>Delete job</a></li>

                <li role="separator" class="divider"></li>
                <li><a href="#" class="execute">Execute Now</a></li>
                <li><a href="#" class="addTrigger">Add Trigger</a></li>
            </ul>
        </section>
    </header>
    
    <section class="detailsContainer"></section>

    <table class="cq-triggers triggers">
        <thead>
            <tr>
                <th>Trigger</th>
                <th>Schedule</th>
                <th>Start date</th>
                <th>End date</th>
                <th>Previous fire date</th>
                <th class="cq-pre-actions">Next fire date</th>
                <th></th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</article> 
	</script>
	<script type="text/view" id="SchedulerView">
		<div class='container'>
    <div class="row">
        <div class='col-sm-12 col-md-2'>
            <div class="row">
                <div class="col-sm-4 col-md-12">
                    <a id="startSchedulerButton" class='cq-button' href="#">
                        <span class="cq-icon flaticon-play"></span> Start scheduler
                    </a>
                </div>

                <div class="col-sm-4 col-md-12">
                    <a id="stopSchedulerButton" class='cq-button' href="#">
                        <span class="cq-icon flaticon-power"></span> Shutdown
                    </a>
                </div>

                <div class="col-sm-4 col-md-12">
                    <a id="refreshData" class='cq-button' href="#">
                        <span class="cq-icon flaticon-refresh"></span> Refresh
                    </a>
                </div>
            </div>
        </div>

        <div class='col-sm-12 col-md-5'>
            <table class="cq-info-table">
                <thead>
                    <tr>
                        <th colspan="2">Statistics</th>
                    </tr>
                </thead>
                <tr>
                    <th>Running since:</th>
                    <td class="runningSince"></td>
                </tr>
                <tr>
                    <th>Total Jobs:</th>
                    <td class="totalJobs"></td>
                </tr>
                <tr>
                    <th>Executed Jobs:</th>
                    <td class="executedJobs"></td>
                </tr>
            </table>
        </div>

        <div class='col-sm-12 col-md-5'>
            <table class="cq-info-table">
                <thead>
                    <tr>
                        <th colspan="2">Properties</th>
                    </tr>
                </thead>
                <tr>
                    <th>Name:</th>
                    <td class="schedulerName"></td>
                </tr>
                <tr>
                    <th>Instance ID:</th>
                    <td class="instanceId"></td>
                </tr>
                <tr>
                    <th>Is remote:</th>
                    <td class="isRemote"></td>
                </tr>
                <tr>
                    <th>Scheduler type:</th>
                    <td class="schedulerType"></td>
                </tr>
            </table>
        </div>
    </div>
</div>
 
	</script>
	<script type="text/view" id="TriggerDialogView">
		<div class="cq-dialog-container">
    <header class="cq-dialog-header">
        <h2>Add Trigger</h2>
    </header>
        
    <div class="cq-dialog-content">
        <form class="cq-form form-horizontal">
            <div class="form-group form-group-sm">
                <label for="triggerName" class="col-sm-3 control-label">Trigger Name:</label>
                <div class="col-sm-9">
                    <input id="triggerName" type="text" class="triggerName form-control" />
                    
                    <p class="cq-field-description">
                        Optional trigger friendly name. Quartz will generate a guid if empty.
                    </p>
                </div>
            </div>
            
            <div class="cq-form-separator"></div>

            <div class="form-group form-group-sm">
                <label for="triggerType" class="col-sm-3 control-label">Trigger Type:</label>
                <div class="col-sm-9">
                    <select id="triggerType" class="form-control triggerType">
                        <option value="Simple">Simple</option>
                        <option value="Cron">Cron</option>
                    </select>
                </div>
            </div>
                
            <div class="simpleTriggerDetails">
                <div class="form-group form-group-sm">
                    <label for="repeatCount" class="col-sm-3 col-xs-12 control-label">Repeat Count:</label>
                    <div class="col-sm-5 col-xs-8 repeatCountContainer">
                        <input id="repeatCount" type="text" class="form-control repeatCount" />    
                    </div>
                    <div class="col-sm-4 col-xs-4">
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" class="repeatForever" /> Repeat forever
                            </label>
                        </div>
                    </div>
                </div>

                <div class="form-group form-group-sm last">
                    <label class="col-sm-3 col-xs-12 control-label" for="repeatInterval">Repeat every:</label>

                    <div class="col-sm-5 col-xs-6 repeatIntervalContainer">
                        <input id="repeatInterval" type="text" class="form-control repeatInterval"/>
                    </div>

                    <div class="col-sm-4 col-xs-6">
                        <select class="form-control repeatIntervalType">
                            <option>Milliseconds</option>
                            <option>Seconds</option>
                            <option>Minutes</option>
                            <option>Hours</option>
                            <option>Days</option>
                        </select>
                    </div>
                </div>
            </div>

            <div class="cronTriggerDetails">
                <div class="form-group form-group-sm last">
                    <div>
                        <label for="cronExpression" class="col-sm-3 control-label">Cron Expression:</label>
                        <div class="col-sm-9">
                            <input id="cronExpression" type="text" class="form-control cronExpression" />
                            <div class="cronExpressionContainer"></div>
                            <p class="cq-field-description">
                                Read more about cron format at <a target="_blank" href="https://www.quartz-scheduler.net/documentation/quartz-2.x/tutorial/crontrigger.html">Quartz.NET docs</a>
                            </p>
                        </div>    
                    </div>
                </div>
            </div>
        </form>
    </div>
        
    <footer class="cq-dialog-footer">
        <a href="#" class="cancel cq-button pull-left">Cancel</a>
            
        <a href="#" class="save cq-button cq-main-button pull-right">Save</a>
    </footer>
</div> 
	</script>
	<script type="text/view" id="TriggerView">
		<tr>
    <td>
        <span class="status"></span>
        <span class="name"></span>
    </td>
    <td class="type"></td>
    <td class="startDate"></td>
    <td class="endDate"></td>
    <td class="previousFireDate"></td>
    <td class="nextFireDate cq-pre-actions"></td>
    <td class="cq-trigger-actions">
        <section class="actions dropdown pull-right">
            <a href="#" class="cq-actions-toggle dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li class="cq-with-icon"><a href="#" class="pause" title=""><span class="flaticon-pause"></span>Pause trigger</a></li>
                <li class="cq-with-icon"><a href="#" class="resume" title=""><span class="flaticon-play"></span>Resume trigger</a></li>

                <li role="separator" class="divider"></li>
                <li class="cq-with-icon"><a href="#" class="delete" title=""><span class="flaticon-remove"></span>Delete trigger</a></li>
            </ul>
        </section>
    </td>
</tr> 
	</script>
	
	<script src="?path=Scripts.jquery-1.11.1.min.js"></script>
	<script src="?path=Scripts.john-smith-3.2.0.js"></script>
	<script src="?path=Scripts.lodash.compat.min.js"></script>
	<script src="?path=Scripts.application.js"></script>
	<script src="?path=Scripts.bootstrap.js"></script>
	
</body>
</html>